<template>
	<view class="login">
		<view style="width: 94%;margin: 0 auto;">
			<view style="height: 25px;"></view>
			<view class="logintitle">
				<view class="star"></view>
				<view class="star star1"></view>
				<view class="star star2"></view>
				<view class="star star3"></view>
				<view class="star star4"></view>
				<view class="star star5"></view>
				<view class="star star6"></view>
				<view class="star star7"></view>
				<view class="star star8"></view>
				<view class="star star9"></view>
				<view class="star star10"></view>
				<view class="star star11"></view>
				<view class="star star12"></view>
				<view class="star star13"></view>
				<view class="star star14"></view>
				<view class="star star15"></view>
				账号密码登录
			</view>
			<view style="height: 25px;"></view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="phone">
					<view style="color: rgb(255, 255, 255);font-size: 20px;">手机号</view>
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<view style="color: rgb(255, 255, 255);font-size: 20px;">密码</view>
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>

			<button class="loginbtn" v-show="showstates" @click="submit">登录</button>
			<button class="loginbtn" v-show="!showstates">
				<uni-load-more :status="status" />
			</button>

			<view style="margin-top: 10px; display: flex;justify-content: space-between;">
				<navigator url="../yzm/yzm" open-type="redirect" hover-class="other-navigator-hover">
					<view style="color: rgb(0, 162, 255);">短信验证码登录</view>
				</navigator>

				<view>
					<navigator url="../czmm/czmm" open-type="redirect" hover-class="other-navigator-hover">
						<view style="color: rgb(115, 116, 117);;">重置密码</view>
					</navigator>
					<navigator url="../zhuce/zhuce6666" open-type="redirect" hover-class="other-navigator-hover">
						<view style="color: rgb(0, 162, 255);;margin-top: 10px;">去注册?</view>
					</navigator>
				</view>
			</view>
		</view>

		<view class="star"></view>
		<view class="star star1"></view>
		<view class="star star2"></view>
		<view class="star star3"></view>
		<view class="star star4"></view>
		<view class="star star5"></view>
		<view class="star star6"></view>
		<view class="star star7"></view>
		<view class="star star8"></view>
		<view class="star star9"></view>
		<view class="star star10"></view>
		<view class="star star11"></view>
		<view class="star star12"></view>
		<view class="star star13"></view>
		<view class="star star14"></view>
		<view class="star star15"></view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			// 加载中
			showstates: true,
			status: 'loading',
			formData: {
				phone: "",
				password: "",
			},
			rules: {
				phone: {
					rules: [{
						required: true,
						errorMessage: '请输入账号',
					}]
				},


				password: {
					rules: [{
						required: true,
						errorMessage: '请输入密码',
					}]
				}
			}
		};
	},
	methods: {
		submit() {
			this.showstates = false
			this.$refs.form.validate().then(res => {
				let obj = {
					phone: this.formData.phone,
					password: this.formData.password
				}
				uni.request({
					url: 'http://127.0.0.1:3366/gzj/login',
					data: obj,
					// header: {
					//     // 'Content-Type': 'application/x-www-form-urlencoded'
					//     'Content-Type': 'application/json' //自定义请求头信息
					// },
					method: 'POST', //请求方式，必须为大写
					success: (res) => {

						if (res.data.code === 200) {
							console.log('---------', res.data);
							wx.setStorageSync('token', res.data.token);
							wx.setStorageSync('user', res.data.user);
							// 跳转
							uni.switchTab({
								url: '/pages/web/cp/Home'
							});
						} else {

							uni.showToast({
								title: res.data.msg
							})
						}
						
					}

				})
			}).catch(err => {
				console.log('表单错误信息：', err);
			})
			setTimeout(() => {
				console.log(123);
				this.showstates = true
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>
.uni-forms-item__label text {
	color: red;
}

.login {
	width: 100vw;
	height: 100vh;
	background: url('https://img1.baidu.com/it/u=3867574171,2713226701&fm=253&fmt=auto&app=120&f=JPEG?w=251&h=500') center center no-repeat;
	background-size: 100vw 100vh;
	margin: 0 auto;
	overflow: hidden;
}

.logintitle {
	width: 100%;
	height: 150px;
	text-align: center;
	border-radius: 20px;
	line-height: 200px;
	font-size: 25px;
	color: white;
	margin-bottom: 10px;
	// background: url('https://img1.baidu.com/it/u=1536977062,3316336535&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333') center center no-repeat;
	background-size: 400px;
}

.loginbtn {
	background-color: rgb(0, 119, 255);
	color: white;
}


.login .star {
	display: block;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	background: #fff;
	top: -50px;
	left: 200px;
	position: relative;
	transform-origin: 100% 0;
	animation: star-ani 6s infinite ease-out;
	box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);
	opacity: 0;
	z-index: 2;
}

.login .star:after {
	content: '';
	display: block;
	top: -10px;
	left: 200px;
	border: 0px solid #eb2222;
	border-width: 0px 90px 3px 90px;
	border-color: transparent transparent transparent #fff;
	transform: rotate(-45deg) translate3d(1px, 3px, 0);
	box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
	transform-origin: 0% 100%;
	animation: shooting-ani 1s infinite ease-out;
}




.login .star1 {
	top: -10px;
	left: 300px;
	background: #fff;
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
}

.login .star1:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
}

.login .star2 {
	top: 100px;
	left: 200px;
	background: #fff;
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
}

.login .star2:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 0;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
}

.login .star3 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star3:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star4 {
	top: 100px;
	left: 250px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star4:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star5 {
	top: 200px;
	left: 250px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star5:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star6 {
	top: -10px;
	left: 100px;
	background: #1eff00;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.login .star6:after {
	border-color: transparent transparent transparent #63f700;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}


.login .star7 {
	top: 100px;
	left: 200px;
	background: #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.login .star7:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.login .star13 {
	top: -10px;
	left: 210px;
	background: #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.login .star13:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.login .star14 {
	top: -100px;
	left: 150px;
	background: #fdf901;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
}

.login .star14:after {
	border-color: transparent transparent transparent #0004fd;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
}


.login .star15 {
	top: 200px;
	left: 250px;
	background: #fff;
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
}

.login .star15:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
}

.login .star8 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.login .star8:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.login .star9 {
	top: 100px;
	left: 250px;
	background: #fff;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
}

.login .star9:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
}

.login .star10 {
	top: 200px;
	left: 250px;
	background: #fff;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.login .star10:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.login .star11 {
	top: -10px;
	left: 100px;
	background: #00ff15;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.login .star11:after {
	border-color: transparent transparent transparent #2bff00;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.login .star12 {
	top: -10px;
	left: 100px;
	background: #f80000;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
}

.login .star12:after {
	border-color: transparent transparent transparent #ff03b3;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
}

@keyframes star-ani {
	0% {
		opacity: 0;
		transform: scale(0) rotate(0) translate3d(0, 0, 0);
		-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	}

	50% {
		opacity: 1;
		transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
		-webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
		-moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
	}

	100% {
		opacity: 0;
		transform: scale(1) rotate(0) translate3d(-400px, 300px, 0);
		-webkit-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
		-moz-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
	}
}
</style>